<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/nerveslider.css">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page--> 
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Layout</h1>
					<h1 class="title">Left Sidebar</h1>
						<h1 class="intro">
							Web design is the creation of <span class="hue">digital environments</span>, that <span>facilitate</span> and encourage human activity; 
							<span>reflect </span> or adapt to individual voices and content. - Jeffrey Zeldman
						</h1>
					</div>
				</div>
			</div>
		<div class="container wrapper">
	<div class="inner_content">
	
	<!-- sidebar -->
		<div class="row pad30">
			<div class="col-md-3">
			 <h4><span>h4 Heading</span></h4>
				<p>An choro nemore dolores eos, voluptua oportere vim ea, ne mei deleniti convenire. Vix reprimique scribentur ea, ne dolorem.</p>
				
				<ul class="fa-ul">
					<li><i class="fa-li fa fa-check colour"></i> Responsive Design</li>
					<li><i class="fa-li fa fa-check colour"></i> One font, 249 icons</li>
					<li><i class="fa-li fa fa-check colour"></i> Powerful front-end framework</li>
				</ul>
				
				<p>Lorem ipsum dolor sit amet, doming ullamcorper vix no, hinc dictas percipitur.</p>
				
				<div class="pad10"></div>
				
					<!-- /SLIDER set height and width of your images in the script at the bottom of page -->
				<div class="myslider2">
					<img src="img/portfolio/1.jpg" alt="" >
					<img src="img/portfolio/2.jpg" alt="" >
					<img src="img/portfolio/3.jpg" alt="" >
				</div>
				
				<div class="pad15"></div>
				<blockquote>
					Lorem ipsum dolor sit amet, doming ullamcorper vix no, hinc dictas percipitur.
				</blockquote>
				
				<p>
					<a href="#" class="zocial icon twitter"></a> 
					<a href="#" class="zocial icon facebook"></a>
					<a href="#" class="zocial icon googleplus"></a>
				</p>		
					</div>
			
			<div class="col-md-9 pad15">
			<!-- sidebar -->
			
			<!-- /SLIDER set height and width of your images in the script at the bottom of page -->
				<div class="myslider1">
					<img src="img/large/index_slider1.jpg" alt="" >
					<img src="img/large/index_slider2.jpg" alt="" >
					<img src="img/large/index_slider3.jpg" alt="" >
				</div>
			
			<h2><span>Heading (h2)</span></h2>
			
			<p>
				<b>Lorem ipsum dolor sit amet, doming ullamcorper vix no, hinc dictas percipitur pri ea, reque laboramus id qui. 
				Per an dicta verear ornatus, te est saperet offendit, pri ei mollis deleniti efficiantur. An choro nemore dolores eos.</b>
			</p>
			
			<p>
				Epicuri scaevola at nam, accusam assentior pro ut. Quis suavitate in vis. Sale commune sed no, ex choro sanctus sadipscing duo, mel semper 
				detraxit id. Ne erant dicant blandit vis, ut eos vidit sententiae dissentiet.
			</p>
			
			<p>
				Lorem ipsum dolor sit amet, nihil consul ei qui, mel salutatus vulputate ut. Quo ad verterem antiopam, nullam omnesque placerat ex eum. 
				Has id utroque urbanitas, in hinc deserunt eos. Quidam discere ne quo, ne per inimicus scripserit, animal efficiantur ea nam. Paulo patrioque interesset 
				ut mei, qui at tantas noluisse postulant. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. 
				Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur posuere. 
				Vestibulum id ligula porta euismod semper. Aenean lacinia bibendum vestibulum venenatis. Vestibulum id ligula porta euismod semper.
			</p>
		</div>
			</div>
				</div>
					</div>
						<div class="pad45 hidden-md hidden-lg"></div>
					<!--//page-->
						
			<!--footer-->
		<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
				<!-- up to top -->
				<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				<!--//end-->  
				  
<!-- scripts -->
<script src="js/jquery.js"></script>	
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

<!-- slider -->
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.nerveSlider.min.js"></script>
<script>
	//<![CDATA[
	$(document).ready(function() {
	$(".myslider1").show().nerveSlider({
		sliderWidth:1170,
		sliderHeight:422,
		slideTransitionSpeed: 500,
		sliderResizable: true
		});
	
<!-- slider sidebar -->

	$(".myslider2").show().nerveSlider({
		sliderWidth:700,
		sliderHeight:525,
		slideTransitionSpeed: 500,
		sliderResizable: true
		});
	});
//]]>
</script>

</body>
</html>

